<template>
  <section v-loading="Loading">
    <!-- 工具栏 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="condition">
        <!-- <el-form-item>
          <el-date-picker
            v-model="condition.RY_live_date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
          ></el-date-picker>
        </el-form-item>-->
        <el-form-item>
          <el-select v-model="condition.type" placeholder="类型" clearable>
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="condition.RY_name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="condition.RY_degsonid	" placeholder="工号"></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 数据展示 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="selsChange"
      v-loading="Loading"
      title
    >
      <!-- <el-table-column align="center" type="selection" fixed width="50"></el-table-column> -->
      <el-table-column align="center" label="序号" fixed type="index" width="50"></el-table-column>
      <el-table-column align="center" label="姓名" prop="RY_name" min-width="100"></el-table-column>
      <el-table-column align="center" label="工号" prop="RY_degsonid" min-width="100"></el-table-column>
      <el-table-column align="center" label="性别" prop="RY_sex" min-width="50">
        <template slot-scope="scope">
          <div v-if="scope.row.RY_sex === '0' ">女</div>
          <div v-else-if="scope.row.RY_sex === '1' ">男</div>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="部门" prop="RY_department" min-width="100"></el-table-column>
      <el-table-column align="center" label="岗位" prop="RY_job" min-width="100"></el-table-column>
      <!-- <el-table-column align="center" label="电话" prop="SQ_RY_phone" min-width="100"></el-table-column> -->
      <el-table-column align="center" label="区域" prop="AR_number" min-width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.AR_number === '1585' ">1585号区域</div>
          <div v-else-if="scope.row.AR_number === '333' ">333号区域</div>
          <div v-else-if="scope.row.AR_number === '178' ">178号区域</div>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="宿舍楼" prop="SSL_number" min-width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.SSL_number === '1' ">4号宿舍楼</div>
          <div v-else-if="scope.row.SSL_number === '2' ">AB栋</div>
          <div v-else-if="scope.row.SSL_number === '3' ">333号宿舍楼</div>
          <div v-else-if="scope.row.SSL_number === '4' ">周塘西街178号</div>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="房间" prop="RY_number" min-width="50"></el-table-column>
      <el-table-column align="center" label="床位" prop="RY_bed" min-width="40"></el-table-column>
      <el-table-column align="center" label="入住时间" prop="RY_live_date" min-width="150"></el-table-column>
      <el-table-column align="center" label="退宿时间" prop="RY_retreat_date" min-width="150"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :total="totalPage"
        style="float:right;"
      ></el-pagination>
    </el-col>
  </section>
</template>
<script>
import { dorm_manage_select } from "../../api/record.js";
export default {
  data() {
    return {
      condition: {
        RY_name: "",
        RY_degsonid: "",
        type: "",
        limit: 1,
      },
      tableData: [
        {
          RY_name: null,
          RY_sex: null,
          RY_degsonid: null,
          RY_department: null,
          RY_job: null,
          SQ_RY_phone: null,
          AR_number: null,
          RY_number: null,
          SS_number: null,
          RY_bed: null,
          RY_live_date: null,
          SQ_retreat_date: null,
        },
      ],
      // pickerOptions2: {
      //   shortcuts: [
      //     {
      //       text: "最近一周",
      //       onClick(picker) {
      //         const end = new Date();
      //         const start = new Date();
      //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      //         picker.$emit("pick", [start, end]);
      //       },
      //     },
      //     {
      //       text: "最近一个月",
      //       onClick(picker) {
      //         const end = new Date();
      //         const start = new Date();
      //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      //         picker.$emit("pick", [start, end]);
      //       },
      //     },
      //     {
      //       text: "最近三个月",
      //       onClick(picker) {
      //         const end = new Date();
      //         const start = new Date();
      //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      //         picker.$emit("pick", [start, end]);
      //       },
      //     },
      //   ],
      // },
      type: [
        {
          label: "退宿",
          value: "0",
        },
        {
          label: "入住",
          value: "1",
        },
      ],
      Loading: false,
      currentPage: 1,
      totalPage: 0,
    };
  },
  methods: {
    getData() {
      if (this.condition.type === "") {
        this.$message.error("请先选择类型!");
        return false;
      }
      // this.condition._time = this.timehandle(this.condition.RY_live_date);
      this.Loading = true;
      dorm_manage_select({
        date_start: "",
        date_end: "",
        type: this.condition.type,
        RY_name: this.condition.RY_name,
        RY_degsonid: this.condition.RY_degsonid,
        limit: this.condition.limit,
      }).then((res) => {
        this.Loading = false;
        if (res) {
          this.totalPage = res.count;
          this.tableData = res.data;
        } else {
          this.tableData = "";
          this.totalPage = 0;
          this.currentPage = 1;
        }
      });
    },
    //TODO: 查询
    search() {
      this.condition.limit = 1;
      this.getData();
    },
    //TODO: 分页
    handleCurrentChange(val) {
      this.condition.limit = val === undefined ? this.currentPage : val;
      this.getData();
    },
    selsChange(sels) {
      this.sels = sels;
    },
    timehandle(RY_live_date) {
      //   if (RY_live_date.length === 0) return RY_live_date;
      //   //将时间转化为unix时间, map返回新数组;
      //   let _time = RY_live_date.map(function (value, index) {
      //     return parseInt(value.getTime() / 1000);
      //   });
      //   return _time;
    },
  },
  mounted() {
    // this.getData();
  },
};
</script>
 <style>
</style>
